<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en">
<head>
	<title>GoRoam : Search for a Geo Point</title>
	<meta http-equiv='pragma' content='no-cache'/>
	<meta http-equiv='expires' content='-1'/>
	<meta name='description' content='Use this tool to find a geographic location and generate the code to geomap items on your web page.' />
	<meta name='keywords' content='find search code generate goroam geo point lat lng geotag geotagger geomapper tag tagger mapper map gmap google googlemaps' />
	<script src="https://goroam.googlecode.com/svn/trunk/scripts/goroam.api.js?gmaps_key=ABQIAAAAIyngGC0C6B-tawZ0KgdlKRStIM51TyQVb__IWchlc-roQdO06BS48qjaCOXx4c_HmOnx2SFxx6ggcg" type="text/javascript"></script>
	<link href="/svn/trunk/css/geo_goroam.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body id='body' class='search_page'>
	<div class='page'>
		<div class='main ' id='main'>
      <h1>Find the latitude and longitude of your item</h1>

      <h2>Find the latitude and longitude of your item using the map below.  You can either use the search box to find a named location, or you can simply drag the pushpin to the location you want.  Find the results in the boxes on the right and cut-and-paste the code into your web page.</h2>
      <form onsubmit='goroam.google.maps.get_map().goto_location(document.getElementById("location").value); return false;' id='search_form'>
        <input type='text' id='location' /><input type='submit' value='Search' class='button' />
      </form>
      <ul class='gr_item_list'>
        <li><div id='found_addr'></div></li>
        <li><div class='input_prompt'>latitude:</div><div class='input_field'><input type='text' id='lat' onfocus='this.select();' onclick='this.select();' /></div></li>
        <li><div class='input_prompt'>longitude:</div><div class='input_field'><input type='text' id='lng' onfocus='this.select();' onclick='this.select();' /></div></li>
        <li><div class='input_prompt'>code:</div><div class='input_field'><textarea id='code' onfocus='this.select();' onclick='this.select();'></textarea></li>
      <!--  <li><a href='' style='display:none;' id='goto_link'>Go to this geo point</a></li>
        <li><a href="" id="add_tag_link">Geotag something at this geo point</a>
      </li>
        <li><div class='change_radius'>
        Search around this point for  
        <nobr>
        <input type='text' id='dist' size='5' />
        <select id='units'>
          <option value='mi'>miles</option>
          <option value='km'>kilometers</option>
        </select>
        </nobr>
        <input type='button' value='Go' onclick='var iDist = document.getElementById("dist").value; if (goroam.system.is_numeric(iDist) && (iDist != "")) { location.href = "/" + iDist + document.getElementById("units").value; return true; } else { alert("The distance must be a number."); return false; }' />
      </div>
      </li>-->
        <li class='additional_item_header'>Enter your item and title below to generate the full HTML.</li>
        <li class='additional_item'>
          <form id='generate_form' onsubmit='generate_html(); return false;'>
            <div class='input_prompt'>item:</div><div class='input_field'><textarea id='item' ></textarea>
            <div class='input_prompt'>title:</div><div class='input_field'><input type='text' id='title' /></div>
            <div class='input_field'>

              This is: <select id='code_template'>
                <option value='<a href="{item}" lat="{lat}" lng="{lng}">{title}</a>'>URL</option>
                <option value='<img href="{item}" lat="{lat}" lng="{lng}" alt="{title}" />'>Image</option>
                <option value='<p lat="{lat}" lng="{lng}" title="{title}">{item}</p>' selected='selected'>General Text</option>
              </select>
              <input type='submit' value='Generate' class='button' />
            </div>

          </form>
        </li>
        <li class='additional_item'><div class='input_prompt'>code:</div><div class='input_field'><textarea id='generated_code' rows='4' onfocus='this.select();' onclick='this.select();'></textarea></li>
      </ul>
      <div id='map'></div>
      <script>
      google.setOnLoadCallback(function() {
        var objMap = goroam.google.maps.get_map();
        objMap.create_active_marker(undefined, true);
	      objMap.disableDoubleClickZoom();
	      google.maps.Event.addListener(objMap, 'dblclick', function(objOverlay, objLatLng) {
		      this.recenter_active_marker(objLatLng);
		      goroam.event.trigger(this, 'location_found', this.active_marker.getLatLng());
	      });
        goroam.event.bind(objMap, 'location_found', document.getElementById('lat'), function(objLatLng) { this.value = objLatLng.lat(); });
        goroam.event.bind(objMap, 'location_found', document.getElementById('lng'), function(objLatLng) { this.value = objLatLng.lng(); });
        goroam.event.bind(objMap, 'location_found', document.getElementById('code'), function(objLatLng) { this.value = 'lat="' + objLatLng.lat() + '" lng="' + objLatLng.lng() + '"'; });
        //goroam.event.bind(objMap, 'location_found', document.getElementById('goto_link'), function(objLatLng) { this.href = 'http://geo.goro.am/' + objLatLng.lat() + '/' + objLatLng.lng(); this.style.display = 'inline'; });
        //goroam.event.bind(objMap, 'location_found', document.getElementById('add_tag_link'), function(objLatLng) { this.href = 'http://geo.goro.am/' + objLatLng.lat() + '/' + objLatLng.lng() + '/new'; this.style.display = 'inline'; });
        //goroam.event.bind(objMap, 'location_found', document.getElementById('change_radius_form'), function(objLatLng) { this.action = 'http://geo.goro.am/' + objLatLng.lat() + '/' + objLatLng.lng(); });
        goroam.event.bind(objMap, 'location_found', document.getElementById('found_addr'), function(objLatLng, strAddress) { this.innerHTML = (strAddress || ''); });
        goroam.event.bind(objMap, 'location_found', document.getElementById('generated_code'), generate_html);
        goroam.event.trigger(objMap, 'location_found', objMap.active_marker.getLatLng());
      });

      function generate_html() {
        var elCode = document.getElementById('generated_code');
        var elLat = document.getElementById('lat');
        var elLng = document.getElementById('lng');
        var elItem = document.getElementById('item');
        var elTitle = document.getElementById('title');
        var elTemplate = document.getElementById('code_template');
        var strTemplate = '';
        if (elTemplate) strTemplate = goroam.dhtml.get_select_value(elTemplate);
        if (elCode && elLat && elLng && elItem && elTitle) {
          elCode.value = strTemplate.replace('{lat}', elLat.value).replace('{lng}', elLng.value).replace('{item}', elItem.value).replace('{title}', elTitle.value);
        }
      }
      </script>
		</div>
	</div>
</body>
</html>

